{extend name="common/layout" /}
{block name="main"}
<div style="margin-top: 10px;">
  欢迎：<span style="color: #409eff;">{$layout_login_user.username}</span>！
  您的账号于<span style="color: #409eff;">{$layout_login_user.expiration_date|date='Y-m-d'}</span>到期。
</div>
<el-divider></el-divider>
<div style="margin-bottom: 10px;">数据统计</div>
<el-row :gutter="12">
  <el-col :span="4">
    <el-card shadow="always">
      <div class="card-text">逾期未处理</div>
      <span class="card-number">
        {{cardData.overdue_todo}}
      </span>
    </el-card>
  </el-col>
  <el-col :span="4">
    <el-card shadow="always">
      <div class="card-text">逾期未收</div>
      <span class="card-number">
        {{cardData.overdue_uncollected}}
      </span>
    </el-card>
  </el-col>
  <el-col :span="4">
    <el-card shadow="always">
      <div class="card-text">闲置</div>
      <span class="card-number">
        {{cardData.empty_count}}
      </span>
    </el-card>
  </el-col>
  <el-col :span="4">
    <el-card shadow="always">
      <div class="card-text">入住率</div>
      <span class="card-number">
        {{cardData.occupancy}}
      </span>
    </el-card>
  </el-col>
  <el-col :span="4">
    <el-card shadow="always">
      <div class="card-text">总房产</div>
      <span class="card-number">
        {{cardData.property_count}}
      </span>
    </el-card>
  </el-col>
  <el-col :span="4">
    <el-card shadow="always">
      <div class="card-text">总房间</div>
      <span class="card-number">
        {{cardData.number_count}}
      </span>
    </el-card>
  </el-col>
</el-row>
<el-divider></el-divider>
<div style="margin-bottom: 10px;">年度财务收支走势</div>
<div id="c1"></div>
{/block}

{block name="script"}
<script>
  const data = {
    cardData: {},
  };
  function f() {
    return {
      init: function () {
        let that = this
        axiosGet("{:url('queryHouse')}").then(response => {
          if (response.code == 1) {
            that.cardData = response.data;
          } else {
            that.$message.error('系统出错了!!!');
          }
        });

        axiosGet("{:url('echar')}").then(response => {
          if (response.code == 1) {
            const data = response.data
            // Step 1: 创建 Chart 对象
            const chart = new G2.Chart({
              container: 'c1', // 指定图表容器 ID
              autoFit: true,
              height: 325,
            });
            chart.data(data);
            chart.scale({
              month: {
                range: [0, 1],
              },
              money: {
                nice: true,
              },
            });

            chart.tooltip({
              showCrosshairs: true,
              shared: true,
            });

            chart.axis('money', {
              label: {
                formatter: (val) => {
                  // return val + ' °C';
                  return val;
                },
              },
            });

            chart
              .line()
              .position('month*money')
              .color('project')
              .shape('smooth');

            chart
              .point()
              .position('month*money')
              .color('project')
              .shape('circle');

            chart.render();
          } else {
            that.$message.error('系统出错了!!!');
          }
        });

      }
    }
  }
</script>
{/block}